<template>    
    <div v-if="currentMenuUrl !== ''" class="sub-menu-container" v-click-outside="onClickOutside">
            <div class="menu-content-wrapper">
                <div class="menu-content-container-center">
                    <el-cascader-panel :options="subMenuData" :props="cascaderProps" />
                </div>
            </div>
        </div>
</template>
<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
let cascaderProps = ref({
    value: 'code',
    label: 'name'
})
const props = defineProps(['currentMenuUrl', 'subMenuData'])
let emit = defineEmits(['menu-change'])
const onClickOutside = () => {
    emit('menu-change', '')
}
</script>
<style lang="scss" scoped>
.sub-menu-container {
    position: absolute;
    width: 100%;
    background: #fff;
    top: 80px;
    left: 0;
    flex-direction: row;
    z-index: 1002;
    overflow: auto;
    border-top: 1px solid #ccc !important;
    padding-top: 2rem;
    padding-bottom: 3rem;
    .menu-content-wrapper {
        width: 100%;
        overflow: auto;
        transform: translateY(0);
        overflow-x: hidden;
        height: auto;
        overflow-y: hidden;
        transform-origin: top left;
        .menu-content-container-center{
            max-width: 1280px;
            width: 100%;
            margin: 0 auto;
            padding: 0;
            .is-bordered{
                border: none !important;
                :deep(.el-cascader-menu){
                    border: none !important;
                }
            }
            :deep(.el-scrollbar__wrap) {
                height: auto !important;
            }
        }
    }
}
</style>